<template>
	<view class="addition-MP" :style="'top:' + top + ';right:' + right">
		<uv-transition :show="additionzjShow" mode="fade">
			<view class="addition-box">
				<view class="content">点击“<text style="vertical-align: middle" class="dy-iconfont icon-weixinxiaochengxudian"></text>”添加到我的小程序，方便下次访问
				</view>
				<view class="dy-iconfont icon-a-bianzu69" @tap.stop.prevent="close"></view>
			</view>
		</uv-transition>
	</view>
</template>

<script>
	import mp from '@/mixins/mp.js';
	const app = getApp();
	export default {
		mixins: [mp],
		data() {
			return {
				right: '12rpx',
				top: 0,
				additionzjShow: false
			};
		},
		props: {
			additionShow: {
				type: Boolean,
				default: false
			}
		},
		watch: {
			additionShow: {
				handler(value) {
					this.additionzjShow = value;
				},
				immediate: true
			}
		},
		created() {
			this.top = this.mp.menuButtonHeight + this.mp.statusBarHeight + 15 + 'px';
			app.showAddition(); //引导关注
			app.watch(this.setaddition, 'addition'); //addition是globalData中定义的属性
		},
		methods: {
			close() {
				this.additionzjShow = false;
				this.$emit('close');
			},
			show() {
				this.setaddition(true)
			},
			setaddition(value) {
				this.$nextTick(() => {
					this.additionzjShow = value;
				});
				setTimeout(() => {
					this.additionzjShow = false;
				}, 5000);
			}
		}
	};
</script>

<style lang="scss" scoped>
	.addition-MP {
		position: fixed;
		top: 100px;
		right: 100px;
		z-index: 99999;

		.addition-box {
			width: 298rpx;
			// height: 105rpx;
			background: #ffffff;
			border-radius: 20rpx;
			box-sizing: border-box;
			padding: 16rpx 23rpx 16rpx 16rpx;
			box-shadow: 0rpx 0rpx 19rpx 0rpx rgba(198, 204, 202, 0.56);
			display: flex;
			align-content: flex-start;
			position: relative;

			&::after {
				font-family: 'dy-iconfont';
				content: '\e6af';
				font-size: 24rpx;
				color: #fff;
				position: absolute;
				top: 0;
				right: 100rpx;
				transform: translate(0, -76%);
			}

			.content {
				font-size: 22rpx;
				font-weight: 400;
				color: #282d2d;
				line-height: 30rpx;
			}

			.icon-a-bianzu69 {
				font-size: 21rpx;
			}
		}
	}
</style>